import { useState } from 'react';
import '../style/todoList/index.css'
const todoList = () => {
    // 输入框
    const [input, setInput] = useState('')
    const changeInput = (e: any) => {
        setInput(e.target.value)
    }
    // 列表
    const [list, setList]: any = useState([{
        id: 1,
        name: '111',
        checked: false
    }, {
        id: 2,
        name: '111',
        checked: false
    }, {
        id: 3,
        name: '111',
        checked: false
    }])

    // 点击添加
    const handleAdd = () => {
        if (input.trim() === '') { return }
        const newItem = { id: list.length + 1, name: input, checked: false }
        setList([...list, newItem])
        setInput('')
    }
    // 删除
    const handleDel = (id: number) => {
        const newList = list.filter((item: any) => item.id !== id)
        setList(newList)
    }
    // 全选
    const handleAllBtn = () => {
        let newList
        if (list.every((item: any) => item.checked === true)) {
            newList = list.map((item: any) => {
                item.checked = false
                return item
            })
        } else {
            newList = list.map((item: any) => {
                item.checked = true
                return item
            })
        }
        setList(newList)

    }
    // 清除
    const handleClear = () => {
        setList([])
    }
    // 清除选中
    const handleClear1 = () => {
        const newList = list.filter((item: any) => !item.checked)
        setList(newList)
    }
    // 选中
    const handleCheck = (id: number) => {
        const newList = list.map((item: any) => {
            if (item.id === id) {
                item.checked = !item.checked
            }
            return item
        })
        setList(newList)
    }
    return (
        <div className="fatherBox">
            <div className='title'>Todo代办事项</div>
            <div className='inputBox'>
                <input className='input' value={input} onChange={changeInput}></input>
                <button className='btn' onClick={() => { handleAdd() }}>添加</button>
            </div>
            <div className='groupBtn'>
                <button className='clearBtn' onClick={() => { handleAllBtn() }}>全选</button>
                <button className='clearBtn' onClick={() => { handleClear1() }}>清除选中</button>
                <button className='clearBtn' onClick={() => { handleClear() }}>清除</button>
            </div>

            <div className='listBox'>
                {
                    list.map((item: any) => {
                        return <div className='item'>
                            <input type='checkbox' checked={item.checked} onChange={() => {
                                handleCheck(item.id)
                            }}></input>
                            <span className='name'>{item.name}</span>
                            <span className='delBtn' onClick={() => {
                                handleDel(item.id)
                            }}>X</span>
                        </div>
                    })
                }
            </div>
        </div>
    );
};

export default todoList;